<template>
	<view class='topBook-page'>
		<view class="ws-tab ws-tab-x">
			<view class="ws-tab-item" :class='{"active":timeTyped==time.type}' v-for="time in timeType" :key='time.type' @click="changeTimeType(time)">
				{{time.name}}
			</view>
		</view>
		<view class="topBook-content">
			<view class="ws-tab ws-tab-y">
				<view class="ws-tab-item" :class='{"active":bookTyped==book.type}' v-for="book in bookType" :key='book.type' @click="changeBookType(book)">
					{{book.name}}
				</view>
			</view>
			<view class="book-scroll-box" v-if='showList'>
				<mescroll-uni :down="downOption" @init='mescrollInit' @emptyclick="downCallback" @down="downCallback" :up="upOption"
				 @up="upCallback" :fixed="false">
					<view class='ws-book-item' v-for="(item,index) in booklist" :key="item.Id" @click='watchBookInfoEvent(item.Id)'>
						<view class="ws-book-imgb">
							<image class='ws-book-img' :src="imgUrl+item.Img" mode="aspectFill"></image>
							<view class="ws-book-score">
								{{item.Score}}分
							</view>
						</view>
						<view class="ws-book-info">
							<view class="ws-book-name">
								{{item.Name}}
							</view>
							<view class="ws-book-author">
								{{item.Author}}
							</view>
							<view class="ws-book-tag">
								<text class='tag-cname'>{{item.CName}}</text>
							</view>
							<view class="ws-book-doc">
								{{item.Desc}}
							</view>
						</view>
					</view>
				</mescroll-uni>
			</view>
		</view>
	</view>
</template>

<script>
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
	export default {
		data() {
			return {
				bookTyped: 'over',
				timeTyped: 'total',
				bookType: [{
						type: 'over',
						name: '完结'
					},
					{
						type: 'hot',
						name: '最热'
					},
					{
						type: 'new',
						name: '新书'
					},
					{
						type: 'collect',
						name: '收藏'
					},
					{
						type: 'vote',
						name: '评分'
					},
					{
						type: 'commend',
						name: '推荐'
					}
				],
				timeType: [{
						type: 'total',
						name: '总榜'
					},
					{
						type: 'month',
						name: '月榜'
					},
					{
						type: 'week',
						name: '周榜'
					}
				],
				booklist: [],
				imgUrl: 'https://imgapi.jiaston.com/BookFiles/BookImages/',
				page: 1,
				hasNext: true,
				// 下拉刷新的常用配置
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				// 上拉加载的常用配置
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					noMoreSize: 1, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					},
					toTop: {
						src: '/static/img/backtop.png'
					},
					textNoMore: '没有更多数据了'
				},
				mescroll: null,
				showList:true
			};
		},
		created() {
			// this.getNovelBook(this.page)
		},
		components: {
			MescrollUni
		},
		methods: {
			//初始化下拉对象
			mescrollInit(mescroll) {
				// 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
				this.mescroll = mescroll
				this.mescroll.triggerDownScroll()
			},
			/*下拉刷新的回调*/
			downCallback(mescroll) {
				this.page = 1
				this.getNovelBook(this.page,mescroll)
			},
			/*上拉加载的回调*/
			upCallback(mescroll) {
				this.getNovelBook(++this.page,mescroll)
			},
			changeTimeType(time) {
				this.timeTyped = time.type
				this.page = 1
				this.hasNext = true
				this.showList= false
				setTimeout(()=>{
					this.showList= true
				})
			},
			changeBookType(book) {
				this.bookTyped = book.type
				this.page = 1
				this.hasNext = true
				this.showList= false
				setTimeout(()=>{
					this.showList= true
				})
			},
			
			watchBookInfoEvent(id) {
				uni.navigateTo({
					url: `/pages/books/bookInfo/bookInfo?bookid=${id}`
				});
			},
			async getNovelBook(page,mescroll=null) {
				if (!this.hasNext) {
					mescroll.endUpScroll(!this.hasNext);
					return
				}
				const data = await this.$https({
					url: `store/list/${this.bookTyped}/${this.timeTyped}/${page}`
				})
				if (data && data.code === 200) {
					if (page === 1) {
						this.booklist = []
					}
					this.hasNext = data.data.HasNext
					this.booklist = this.booklist.concat(data.data.BookList)
					if(mescroll){
						mescroll.endSuccess()
					}
				} else {
					if(mescroll){
						mescroll.endErr()
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.topBook-page {
		.ws-tab-x {
			display: flex;
			justify-content: space-around;
			background: #fff;

			.ws-tab-item {
				width: 20%;
				font-size: 32rpx;
				line-height: 80rpx;
				color: #666;
				text-align: center;

				&.active {
					color: #007AFF;
					border-bottom: 4rpx solid #007AFF;
				}
			}
		}

		.topBook-content {
			display: flex;
			width: 100%;

			.ws-tab-y {
				width: 160rpx;
				position: absolute;
				top: 176rpx;
				bottom: 0;
				background: #fff;

				.ws-tab-item {
					font-size: 32rpx;
					line-height: 80rpx;
					color: #666;
					text-align: center;
					border-left: 8rpx solid #fff;

					&.active {
						color: #3f98f9;
						border-left: 8rpx solid #007AFF;
						background: #aaffff94;

					}
				}
			}

			.book-scroll-box {
				flex: 1;
				position: absolute;
				top: 166rpx;
				left: 180rpx;
				right: 0;
				bottom: 0;
			}

		}

		.loaddata {
			width: 100%;
			line-height: 80rpx;
			text-align: center;
			font-size: 32rpx;
			color: #999;
		}

		.ws-book-item {
			display: flex;
			padding: 30rpx 20rpx 30rpx 0;
			border-bottom: 1px solid #ddd;

			.ws-book-imgb {
				width: 240rpx;
				height: 320rpx;
				position: relative;

				.ws-book-img {
					width: 240rpx;
					height: 320rpx;
				}

				.ws-book-score {
					position: absolute;
					left: 0;
					bottom: 0;
					z-index: 10;
					width: 100%;
					color: #fbbe53;
					font-size: 32rpx;
					text-align: center;
					line-height: 80rpx;
					background: rgba(0, 0, 0, 0.6);
				}
			}

			.ws-book-info {
				margin-left: 30rpx;

				.ws-book-name {
					font-size: 40rpx;
					color: #333;
				}

				.ws-book-author {
					color: #666;
					font-size: 32rpx;
					line-height: 60rpx;
				}

				.ws-book-doc {
					margin-top: 20rpx;
					font-size: 28rpx;
					min-height: 120rpx;
					color: #666;
					line-height: 60rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.ws-book-new-catalog {
					font-size: 28rpx;
					color: #999;
					line-height: 60rpx;
				}

				.ws-book-tag {
					margin-top: 20rpx;
					font-size: 28rpx;
					color: #999;

					text {
						margin-right: 30rpx;
						padding: 8rpx 12rpx;
						border-radius: 10rpx;
						color: #fff;
					}

					.tag-cname {
						background: #00D6B6;

					}

					.tag-status {
						background: #00B1FF;
					}
				}
			}

		}
	}
</style>
